<template>
    <div class="mill">
        <div class="list" v-for="i in millList" :key="i.id" v-model="i.id">
              <div class="left">
                  <img :src="i.mill_image" alt="pic">
              </div>
              <div class="right">
                <div class="right-top">
                    <div class="div1">
                      <p class="p1">{{language === 'zh-CN' ? i.mill_name : i.english_name}}</p>
                      <p>{{$t('purchase')}}：{{i.period}}{{$t('day')}}</p>
                      </div>
                    <div class="div2">
                          <p class="p2">{{$t('price')}}：{{i.price}}CNY</p>
                    </div>
                  <div class="div2">
                    <p>{{$t('earning')}}：{{i.predict_earnings}}</p>
                  </div>
                </div>
                <p style="color: #cc0000" v-if="i.canbuy === 0">{{$t('mill.canone')}}</p>
                <div class="btn" v-if="i.canbuy === 1"><button  @click="buy(i.id)">{{$t('purchase')}}</button></div>
              </div>
        </div>

      <div v-transfer-dom>
        <confirm v-model="show"
                 :title="$t('purchase miner')"
                 @on-cancel="onCancel"
                 @on-confirm="onConfirm">
          <p style="text-align:center; color: #999">{{$t('want2buy')}}</p>
        </confirm>
      </div>
    </div>
</template>

<i18n>
  purchase:
    en: Purchase
    zh-CN: 购买
  purchase miner:
    en: Purchase miner
    zh-CN: 购买矿机
  want2buy:
    en: do you wang to purchase this miner?
    zh-CN: 确定购买当前矿机吗?
  tuntime:
    en: Run Date
    zh-CN: 运行周期
  price:
    en: Price
    zh-CN: 价格
  earning:
    en: Earnings
    zh-CN: 预计收益
  day:
    en: day
    zh-CN: 天
  mill.buysuccess:
    en: Success
    zh-CN: 购买成功
  mill.failed:
    en: Failed
    zh-CN: 购买失败
  mill.beyond:
    en: Beyond The Quantity Available
    zh-CN: 超出可购买数量
</i18n>

<script>
  import {Toast, Confirm, TransferDomDirective as TransferDom} from 'vux'
  export default {
    directives: {
      TransferDom
    },
    name: 'mill',
    components: {
      Confirm,
      Toast
    },
    data () {
      return {
        show: false,
        millList: [],
        language: localStorage.language
      }
    },
    created () {
      this.init()
    },
    methods: {
      init () {
        this.getInfo()
      },
      getInfo () {
        let vue = this
        let url = 'api/mill/getmilllist'
        vue.post({
          url: url,
          params: {
            token: localStorage.token
          },
          success: function (data) {
            if (data.code === 1) {
              vue.millList = data.data
              // vue.millList.forEach(function (item) {
              //   item.mill_image = item.mill_image
              // })
            }
          }
        })
      },
      buy (index) {
        this.show = true
        localStorage.id = index
      },
      onConfirm () {
        console.log(localStorage.id)
        let vue = this
        let url = 'api/mill/buymill'
        vue.get({
          url: url,
          params: {
            token: localStorage.token,
            mill_id: localStorage.id
          },
          success: function (data) {
            console.log(data)
            if (data.code === 1) {
              vue.$vux.toast.text(vue.$t('mill.buysuccess'), 'middle')
              vue.getInfo()
            } else {
              if (data.msg === '超出可购买数量') {
                vue.$vux.toast.text(vue.$t('mill.beyond'), 'middle')
              } else {
                vue.$vux.toast.text(vue.$t('mill.failed'), 'middle')
              }
            }
          }
        })
      },
      onCancel () {
        console.log('on cancel')
      }
    }
  }
</script>

<style scoped>

    .mill{
      font-size: 0.3rem;
      background-color: #f1f1f1;
      height: 100%;
      box-sizing: border-box;
      padding: .2rem;
    }

    .list{
      display: flex;
      margin-bottom: .2rem;
      background-color: #fff;
      padding: .2rem;
      border-radius: 6px;
      box-shadow: 0px 0px 8px rgba(0,0,0, .6);
    }
    .list .left{
      width: 1.72rem;
      height: 1.72rem;
      flex-shrink: 0;
      text-align: center;
      margin-top: 0.6rem;
    }
    .list .left img{
        width: 100%;
        height: 100%;
    }
    .list .right{
        flex-shrink: 1;
        margin-left: .2rem;
    }
    .list .right p{
      font-size: 0.24rem;
      color: #666666;
      line-height: 2;
    }
    .list .right .p1{
        font-size: 0.3rem;
        color: #333333;
    }
    .list .right .p2{
        font-size: 0.24rem;
    }
    .list .right .btn {
      margin-top: .1rem;
    }
    .list .right .btn button{
        width: 4.6rem;
        height: 0.7rem;
        background-color: #fb5555;
        border-radius: 0.05rem;
        color: #fff;
        border: none;
        font-size: 0.24rem;
    }
</style>
